<template>
  <div ref="mFlex" class="m-flex">
    <slot />
    <i
      v-for="item in 10"
      :key="'i' + item"
      :style="{ width: itemWidth + 'px' }"
    ></i>
  </div>
</template>
<script>
export default {
  name: 'MFlex',
  data() {
    return {
      itemWidth: 0,
    };
  },
  mounted() {
    this.setItemWidth();
    // this.calcPlaceholderITagNumber();
  },
  methods: {
    insertAfter(newElement, targetElement) {
      // newElement是要追加的元素 targetElement 是指定元素的位置
      const parent = targetElement.parentNode; // 找到指定元素的父节点
      if (parent.lastChild === targetElement) {
        // 判断指定元素的是否是节点中的最后一个位置 如果是的话就直接使用appendChild方法
        parent.appendChild(newElement, targetElement);
      } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
      }
    },
    calcPlaceholderITagNumber() {
      const iTag = document.createElement('i'); // 创建一个元素节点
      this.insertAfter(
        iTag,
        this.$refs.mFlex.children[this.$refs.mFlex.children.length - 1]
      ); // 因为js没有直接追加到指定元素后面的方法 所以要自己创建一个方法
    },
    setItemWidth() {
      this.$nextTick(() => {
        const computedStyle = getComputedStyle(
          this.$refs.mFlex.children[0],
          null
        );
        this.itemWidth =
          Number(computedStyle.marginLeft.split('px')[0]) +
          Number(computedStyle.marginRight.split('px')[0]) +
          Number(computedStyle.width.split('px')[0]);
      });
    },
  },
};
</script>
<style lang="less">
.m-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>
